<template>
	<view class="login-box left clearfix">
		<view class="login-content right clearfix">
			<view class="login-title left">
				管理员登录
			</view>
			<view class="login-contents left clearfix">
				<view class="login-input-box left clearfix">
					<input placeholder="请输入手机号码" :focus="focus=='mobile'?true:false"  v-model="mobile" type="number"/>
				</view>
				
				<view class="login-input-box left clearfix">
					<label class="left"><input placeholder="请输入验证码" :focus="focus=='code'?true:false" type="number" v-model="code" /></label>
					<label class="right" v-if="sendStatus==false" @click="sendSms">{{sendCodetext}}</label>
					<label class="right" v-if="sendStatus==true" style="background:#bbb;">{{sendCodetext}}</label>
				</view>
				<view class="login-error left" v-if="errorMeg">
					<uni-icons type="icon-cuowu10" color="red" custom-prefix="iconfont" size="14"></uni-icons>
					{{errorMeg}}
				</view>
				<view class="login-error left" v-else>
					
				</view>
				
				<view class="login-submit left" @click="submitForm()">
					登录
				</view>
			</view>
		</view>
	</view>
</template>
<style>
	.login-input-box label:last-child{width:30%;height:35px;background:#2979ff;color:#fff;cursor:pointer;text-align: center;border-radius: 5px;line-height:35px;font-size:14px;margin-top:7.5px;}
	.login-input-box label:first-child{width:60%;}
	.login-error{width:70%;margin-left:15%;line-height:30px;height:30px;text-align: center;font-size:14px;color:red;margin-top:50px;}
	.login-submit{width:70%;height:45px;background-image: linear-gradient(90deg, #4287fe, #298bfe 25%, #0f8ffd 51%, #25b4c1);text-align: center;line-height:45px;border-radius: 22.5px;margin-left:15%;margin-top:50px;color:#fff;cursor:pointer;}
	.login-contents{width:100%;margin-top:20px;}
	.login-input-box input{width:calc(100% - 10px);height:50px;padding-left:10px;}
	.login-input-box{width:65%;height:50px;margin-left:17.5%;margin-top:50px;line-height:50px;border-bottom:1px solid #ddd;}
	.login-title{width:100%;line-height:50px;text-align: center;font-weight:bold;font-size:22px;margin-top:30px;color:#333;}
	.login-content{width:35%;max-width:450px;height:70%;max-height:550px;background:#fff;margin-right:100px;border-radius: 10px;margin-top:8%;min-height:520px;}
	page,body{height:100%;background:url('/static/images/login-bj.png') no-repeat center center;background-size:cover;}
</style>
<style scoped>
	.login-box{width:100%;height:100%;}
</style>

<script>
	var login = uniCloud.importObject('login',{customUI:true});
	var db = uniCloud.database();
	export default {
		data() {
			return {
				mobile:null,//手机号码
				code:null,//验证码,
				errorMeg:'',//错误提示信息
				focus:null,//焦点字段
				sendCode:null,//发送过后的验证码
				sendCodetext:'发送验证码',
				sendStatus:false,
				sendMobile:null,//发送后绑定的手机号码
			}
		},
		methods: {
			//提交登录
			submitForm(){
				var mobile = this.mobile;
				var code = this.code;
				var sendCode = this.sendCode;
				var sendMobile = this.sendMobile;
				if(!this.isMobilePhone(mobile)){
					this.errorMeg = '请输入正确手机号码';
					this.focus = 'mobile';
					return false;
				}
				
				if(!code){
					this.errorMeg = '请输入验证码';
					this.focus = 'code';
					return false;
				}
				
				if(code!=sendCode){
					this.errorMeg = '验证码错误';
					this.focus = 'code';
					return false;
				}
				
				if(mobile!=sendMobile){
					this.errorMeg = '手机号码发生了变更，请重新获取验证码';
					this.focus = 'mobile';
					return false;
				}
				
				uni.showLoading({
					title:'登录中'
				})
				db.collection('userinfo').where({mobile:mobile,is_admin:true,is_disabled:false}).field('_id,mobile,name,avatar,company,is_admin,sex,age,create_date,create_ip,last_login_date,login_number,role').get({getOne:true}).then(res=>{
					var data = res.result.data;
					if(!data || !data._id){
						uni.hideLoading()
						this.errorMeg = '该账号未注册或不是管理员';
					}else{
						//查询出该用户对应的权限
						db.collection('userinfo_group').where({_id:data.role}).get({getOne:true}).then(roleRes=>{
							data.role = roleRes.result.data.role;
							var time = new Date().getTime();
							var expire = time + 86400000 * 1;
							uni.setStorage({
								key:'userinfo-login',
								data:{
									userinfo:data,
									expire:expire
								},
								success() {
									uni.hideLoading();
									uni.redirectTo({
										url:'/pages/index/index'
									})
								}
							})
						});
						
					}
				}).catch(error=>{
					console.log('登录出错',error);
					uni.hideLoading()
					this.errorMeg = '登录出错，请联系系统管理员';
				});
				
			},
			
			//发送手机验证码
			sendSms(){
				var that = this;
				var tel = this.mobile;
				if(!RegExp(/^1[3456789]\d{9}$/).test(tel)){
					this.errorMeg = '请输入正确手机号码';
					this.focus = 'mobile';
					return false;
				}else{
					this.errorMeg = '';
					this.focus = null;
				}
				uni.showLoading({
					title:'发送中···'
				});
				//调用云函数来发送手机验证码
				var code = parseInt(Math.random()*999999);
				console.log('code',code);
				that.sendCode = code;
				that.sendMobile = tel;
				login.sendSms(tel,code).then(res=>{
					uni.hideLoading()
					var time = 60;
					var interval = setInterval(function(){
						if(time > 1){
							time--;
							that.sendCodetext = time+'重新获取';
							that.sendStatus = true;
						}else{
							that.sendStatus = false;
							that.sendCodetext = '发送验证码';
							clearInterval(interval);
						}
						
					},1000);
				}).catch(err=>{
					uni.hideLoading()
					uni.showToast({
						title: '发送过于频繁，请稍后再试！',
						duration: 2000,
						icon:'none'
					});
				});
				
			},
			
			//验证数据类型为手机号码
			isMobilePhone(phone) {
			  // 支持 11 位数字，以 1 开头，第二位为 3-9
			  const reg = /^1[3-9]\d{9}$/;
			  return reg.test(phone);
			}
		}
	}
</script>

